<template>
  <a-layout style="height:100%">
    <a-layout-sider collapsible v-model="collapsed" class="aside-s" style="width:auto;">
      <!-- <div class="title-icon">A</div> -->
      <a-menu
        :defaultOpenKeys="['SystemSetting']"
        :selectedKeys="selectedKeys"
        mode="inline"
        theme="dark"
        @click="selectMenu"
      >
        <a-sub-menu v-for="res in resources" :key="res.code">
          <span slot="title">
            <a-icon :type="res.icon"/>
            <span v-text="res.name"></span>
          </span>
          <template v-for="item in res.children">
            <a-menu-item v-if="!item.children || item.children.length==0" :key="item.code">
              <a-icon :type="item.icon"/>
              <span>{{item.name}}</span>
            </a-menu-item>
            <a-sub-menu v-else :menuInfo="item" :key="item.code"></a-sub-menu>
          </template>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="custom-header">
        <div class="header-icon">
          <a-icon type="menu-fold" @click="collapseMenu" style="cursor:pointer"/>
        </div>
        <div class="right-icon">
          <a-dropdown>
            <a class="ant-dropdown-link common-icon" href="javascript:;">admin
              <a-icon type="down" class="common-icon"/>
            </a>
            <a-menu slot="overlay" @click="logout">
              <a-menu-item>修改密码</a-menu-item>
              <a-menu-item key="loginout">退出登录</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content class="con" style="background:#fff;padding:5px;">
        <a-tabs
          :hideAdd="true"
          size="small"
          @change="changeTab"
          :activeKey="activeTabKey"
          type="editable-card"
          tabPosition="top"
          @edit="onTabEdit"
          style="height:100%"
        >
          <a-tab-pane :tab="tab.title" :closable="tab.closable" v-for="tab in tabs" :key="tab.code">
            <keep-alive>
              <component :is="tab.component"></component>
            </keep-alive>
          </a-tab-pane>
        </a-tabs>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
// @ is an alias to /src
import Resource from "@/views/system/Resource.vue";

export default {
  name: "home",
  components: {
    Resource
  },
  mounted() {
    let me = this;
    me.resources = this.$store.state.resTreeList;
    if (me.activeTabKey) {
      me.selectedKeys = [me.activeTabKey];
      let oldTab = me.tabs.find(tab => {
        return tab.code == me.activeTabKey;
      });
      if (oldTab && oldTab.resPath) {
        oldTab.component = resolve =>
          require([`@/views/${oldTab.resPath}`], resolve);
      }
    }
  },
  computed: {
    resList() {
      return this.$store.state.resList;
    },
    activeTabKey() {
      return this.$store.state.activeTabKey;
    },
    tabs() {
      return this.$store.state.tabs;
    }
  },
  data() {
    return {
      collapsed: false,
      defaultOpenKeys: [],
      selectedKeys: [],
      curComponent: Resource,
      resources: []
    };
  },
  methods: {
    collapseMenu() {
      this.collapsed = !this.collapsed;
    },
    changeTab(key) {
      let me = this;
      let oldTab = me.tabs.find(tab => {
        return tab.code == key;
      });
      if (oldTab && oldTab.resPath) {
        oldTab.component = resolve =>
          require([`@/views/${oldTab.resPath}`], resolve);
      }
      this.$store.commit("setActiveTabKey", key);
    },
    onTabEdit(targetKey, action) {
      if (action == "remove") {
        let oldTabIndex = this.tabs.findIndex(tab => {
          return tab.code == targetKey;
        });
        if (oldTabIndex != -1) {
          this.tabs.splice(oldTabIndex, 1);
          this.$store.commit("setTabs", this.tabs);
          if (targetKey == this.activeTabKey) {
            this.$store.commit("setActiveTabKey", "");
            this.selectedKeys = [];
          }
        }
      }
    },
    selectMenu(menu) {
      let me = this;
      let oldTab = me.tabs.find(tab => {
        return tab.code == menu.key;
      });
      let curMenu = me.resList.find(m => {
        return m.code == menu.key;
      });
      if (!oldTab) {
        if (!curMenu.resPath) {
          me.$message.error("该菜单还未配置路径");
          return;
        }
        me.tabs.push({
          title: curMenu.name,
          code: curMenu.code,
          closable: true,
          resPath: curMenu.resPath,
          component: resolve => require([`@/views/${curMenu.resPath}`], resolve)
        });
      }
      me.$store.commit("setActiveTabKey", curMenu.code);
      me.selectedKeys = [curMenu.code];
    },
    logout(item) {
      if (item.key == "loginout") {
        this.$router.push({ name: "login" });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.title-icon {
  height: 64px;
  background: #1f2438;
  color: #fff;
  text-align: center;
  line-height: 64px;
  font-weight: bold;
  border-bottom: 1px solid #3c8dbc;
}
.custom-header {
  background: #f9f9f9;
  padding: 0 15px;
  height: 50px;
  position: relative;
  box-shadow: 0 1px 2px rgba(150, 150, 150, 0.3);
}
.header-icon {
  height: 50px;
  line-height: 50px;
  font-size: 22px;
  display: inline-block;
}
.right-icon {
  right: 10px;
  position: absolute;
  top: -5px;
  display: inline-block;
}
</style>

